<!-- 一个宽高为50px*50px 的矩形方块,在一个宽1000px,高500px的区域内,
以其左上角为起点,在区域内以'W'路线进行移动,无限循环。
 要求1000px*500px的区域居中显示-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <style>
   /*背景样式*/
     #container {
         position: relative;
         width: 1000px;
         height: 500px;
         left: 50px;
         right:100px;
         top: 100px;
         margin: auto;
         background-color: aquamarine;
       }
 
     /*滑块样式*/
     #square
     {
         position :relative;
         
         animation-name: bjyx;
         animation-duration: 5s;
         animation-delay: 2s;
         animation-timing-function: ease;
         animation-iteration-count: infinite;
 
         animation-direction: alternate-reverse;
         animation-play-state: running;
 
     }
 
     
     /*运动轨迹*/
     @keyframes bjyx {
         0% {
           top: 0px;
           left: 0px;
         }
         25% {
           top: 450px;
           left: 300px;
         }
         50% {
           top: 0px;
           left: 500px;
         }
         75% {
           top: 450px;
           left: 700px;
         }
         100% {
           top: 0px;
           left: 950px;
         }
       }
 </style>
 <body>
     <div id="container">
       <div id="square">
         <img src="h1.jpg" width="50px";
         height="50px">
       </div>
       </div>
      
 </body>
 </html>